

<!DOCTYPE html>
<html>
<head>

  <title> 垂直下拉导航栏</title>
  <meta charset="utf-8">
  <style>
  a{
		text-decoration:none;
}
p
 {
font-weight:bold;
color:#FFFFFF;
background-color:black;
width:140px;
text-align:center;
padding:10px;
margin:0px;
border:1px solid;
border-radius:25px;
 }
  p:active
  {
      color:red;
  }
  p:hover
  {
      font-size: 140%;
  }
  .dropdown-button
  {
      position: relative;
      display: block;
  }

  .dropdown-content
  {
      display: none;
      position: relative;   
  }
  .dropdown-content p
  {
      background-color:#696969;
      width:100px;
      height: 25px;
      margin-left:22px;
      padding: 5px;
      font-size:15px;
  }
   .dropdown-content p:hover
   {
       background-color:red;   
   }
 
  .dropdown-button:hover .dropdown-content 
  {
      display: block;
  }

  .nav_bar
  {
      
      
      float:left;
	  position:fixed;
  }
  .page_content
  {
height:1000px;
  text-align:center;
  background-image:url("bkgd.jpg") ;
     width: 100%; 
    height: 400px; 
    background-repeat: no-repeat; 
    background-size: contain; 

  }
  </style>
</head>
<body>

<div class="nav_bar">
<div class="dropdown-button">
 <a href="#单机游戏"><p>单机游戏</p></a>
 
  <div class="dropdown-content">
      
  <a href="#资讯">  <p>资讯</p></a>
  <a href="#专题"> <p>专题</p></a>
   <a href="#攻略"> <p>攻略</p></a>
    <a href="#补丁"><p>补丁</p></a>
  </div>
  </div>
<div class="dropdown-button">
    <p>网络游戏</p>
    <div class=" dropdown-content">
    <p>专栏</p>
    <p>评测</p>
    </div>
</div>
  
    <p>手机游戏</p>
    <p>硬件外设</p>
    <p>加入我们</p>
</div>
<div class="page_content">
<h1 >Welcome to Game Center</h1>
</div>
<h1>
</body>
</html>